<template>
  <div class="practice">
    <div class="content">
      <div class="left">
        <div class="left-t">
          <div class="left-top" @click="changeLX" :class="showRoute===1?'active':''">
            练习室 <el-icon v-show="!showLxs" class="right-icon"><ArrowRight /></el-icon>
            <el-icon v-show="showLxs" class="right-icon"><ArrowDown /></el-icon>
          </div>
          <div class="left-hid" v-show="showLxs" @click="showRoute=1">
            <router-link to="/practice/studio" :class="showRoute===1?'act':''">我的练习室</router-link>
          </div>
        </div>
        <div class="left-b">
          <div :class="showRoute===2?'active':''" @click="showRoute=2">
            <router-link to="/practice/huancun" class="left-bom">缓存</router-link>
          </div>
          <div :class="showRoute===3?'active':''" @click="showRoute=3">
            <router-link to="/practice/yinpin" class="left-bom">音频库</router-link>
          </div>
          <div :class="showRoute===4?'active':''" @click="showRoute=4">
            <router-link to="/practice/shoucang" class="left-bom">收藏</router-link>
          </div>
          <div :class="showRoute===5?'active':''" @click="showRoute=5">
            <router-link to="/practice/history" class="left-bom">历史</router-link>
          </div>
        </div>
      </div>
      <router-view></router-view>
    
    </div>
  </div>
</template>

<script lang="ts">

import { defineComponent } from "vue";

export default defineComponent({
  name: "practice",
});
</script>
<script lang="ts" setup>

 import { Clock } from '@element-plus/icons-vue'

 import {ArrowRight,Search,ArrowDown} from '@element-plus/icons-vue'
 import {ref} from 'vue'


  // 控制当前选中的路由
  const showRoute = ref(-1)
  // 控制练习室显示与隐藏
  const showLxs = ref(false)
  const changeLX = () => {
    showLxs.value = !showLxs.value
  }




</script>

<style scoped lang="scss">
.actv{
    border-bottom: hotpink 5px solid;
  }
  .active{
    border-left: hotpink 5px solid;
  }
  .act{
    color: hotpink;
  }
.practice{
  height: 1000px;
  width: 100%;
    background: #f5f7f9;
    overflow: hidden;
    .content{
      width: 1200px;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      .left{
        width: 170px;
        margin-right: 10px;
        float: left;
        .left-t{
          background: #fff;
          padding: 5px 0;
          margin-bottom: 10px;
          .left-top{
            font-size: 14px;
            color: #111;
            padding: 17px 21px;
            text-decoration: none;
            position:relative;
            .right-icon{
              color: #333;
              float: right;
              position: absolute;
              right: 20px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 10px;
            }
          }
          .left-hid{
            font-size: 14px;
            padding: 12px 0 12px 49px;
            color: #111;
          }
        }
        .left-b{
          background: #fff;
          padding: 5px 0;
          margin-bottom: 10px;
          .left-bom{
            font-size: 14px;
            color: #111;
            padding: 17px 21px;
            display: block;
          }
        }
      }
      .right{
        width: 1020px;
        float: right;
      }


     
    }
}
</style>
